

<template>
  <div class="count">
    <h2>当前求和为: {{ countStore.sum }}</h2>
    <h3>欢迎来到:{{ countStore.school }} 地址:{{ countStore.address }}</h3>
    <h2>当前求和为: {{ sum }} {{ bigSum }} {{ upperSchool }}</h2>
    <h3>欢迎来到:{{ school }} 地址:{{ address }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <button @click="add">+</button>
    <button @click="minus">-</button>
  </div>

</template>
 
<script setup lang="ts" name="Count">
import { ref , reactive, toRefs} from 'vue'
import { useCountStore} from '@/store/count'
import { storeToRefs } from 'pinia'
let countStore = useCountStore()
console.log('countStore', countStore)

// const { sum, school, address} = toRefs(countStore)
// console.log('toRefscountStore', toRefs(countStore) // 会把store身上的所有数据方法变成ref)
// storeToRefs 只会针对store上的数据,不会对方法进行包裹 
const { sum, school, address, bigSum, upperSchool } = storeToRefs(countStore)




//以下两种方式都能拿到state中的数据
// console.log(countStore.sum)
// console.log(countStore.$state.sum)
let obj = reactive({
  a:1,
  b:2,
  c: ref(3)
})

// 输出c=3
// reactive里面的ref不用.value
console.log(obj.c)











let n = ref(1)

const add = () => {
  // 第一种修改方式
  // countStore.sum += n.value
  // countStore.school = '你好'
  // countStore.address += 'pinia'

  // 第二种修改方式
  // countStore.$patch({
  //   sum: 888,
  //   school: '你好',
  //   address: 'pinia'
  // })

  // 第三种修改方式
  countStore.actionJia(n.value)

}

const minus = () => {
  countStore.sum -= n.value
}

</script>

<style scoped>
  .count {
    background: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>
